<template>
  <div>
    <a-form
      ref="formRef"
      :model="formParam"
      :hideRequiredMark="isStatus === '演练记录'"
      v-bind="formItemLayout"
    >
      <a-card>
        <v-table
          ref="tableRef"
          :keys="keys"
          :columns="columns"
          :form="form"
          :formParam="formParam"
          :pagination="false"
          :bordered="true"
          :inline="false"
        />
      </a-card>
    </a-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { formItemLayout, form, data, columns } from "./index";
import dayjs from "dayjs";
import tool from "@/utils/tool";

const emit = defineEmits(["callback"]);

// ref
const formRef = ref(null);

// data
const keys = "projectList";
const isStatus = ref("演练情况");
const formParam = ref({});
// 打开弹窗
const open = async () => {
  formParam.value[keys] = JSON.parse(JSON.stringify(data));
};
open();

const refresh = () => {
  tableRef.value.refresh();
};
</script>

<style lang="scss" scoped>
:deep(.table-col-width) {
  .ant-col {
    max-width: 100%;
  }
}

.but {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  thead,
  tbody {
    tr {
      > th,
      > td,
      .span-td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
      }
      > th {
        background-color: #f2f2f2;
      }
      .span-td {
        border: none;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
      }
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
  }
}
</style>
